<template>
    <view class="container">
        <view class="coupon">
            <view class="operation">
                <view @click="generateCoupon"
                    ><iconsfont color="#999999" customIcons="icon-youhuiquan" size="32"></iconsfont
                    ><text>生成优惠券</text></view
                >
                <view @click="goUrl('/pages/coupon/add?id=' + data.ID)"
                    ><iconsfont color="#999999" customIcons="icon-bianji1" size="32"></iconsfont><text>编辑</text></view
                >
                <view @click="delcoupon"
                    ><iconsfont color="#999999" customIcons="icon-shanchu2" size="32"></iconsfont
                    ><text>删除</text></view
                >
            </view>
            <view class="coupon-top">
                <view class="flex c-t-l">
                    <view class="tag" :class="data.PrivilegeWay == 0 ? 'tag' : data.PrivilegeWay == 1 ? 'tag1' : 'tag2'"
                        ><text>{{ data.PrivilegeWayName }}</text></view
                    >
                    <view class="name">{{ data.Name }}</view>
                    <!-- <view>介绍介绍介绍介绍介绍</view> -->
                    <view class="time" v-if="data.UseTimeCreateWay == 0"
                        >有效期：{{ data.UseStartTime.substring(0, data.UseStartTime.length - 9) }}-{{
                            data.UseEndTime.substring(0, data.UseEndTime.length - 9)
                        }}</view
                    >
                    <view class="time" v-if="data.UseTimeCreateWay == 1">有效期：{{ data.EffectiveDays }}天</view>
                </view>
                <view
                    class="flex c-t-r"
                    :class="data.PrivilegeWay == 1 ? 'c-t-r1' : data.PrivilegeWay == 2 ? 'c-t-r2' : ''">
                    <view class="price" v-if="data.PrivilegeWay == 0"
                        >{{ data.PrivilegeValue / 10 }}<text>折</text></view
                    >
                    <view class="price price1" v-if="data.PrivilegeWay == 1"
                        >{{ data.PrivilegeValue }}<text>元</text></view
                    >
                    <view class="price price2" v-if="data.PrivilegeWay == 2"
                        ><text class="price2-text1">{{ data.PrivilegeValue }}</text
                        ><text class="price2-text2">~</text>{{ data.MaxPrivilegeValue }}<text>元</text></view
                    >
                    <view
                        class="give"
                        :class="data.PrivilegeWay == 1 ? 'give1' : data.PrivilegeWay == 2 ? 'give2' : ''"
                        @click="give"
                        >立即赠送</view
                    >
                </view>
            </view>
            <view class="coupon-bottom">
                <view
                    ><view v-if="data.Remark" @click="remarkdesc"
                        >使用说明<u-icon
                            size="20"
                            style="transform: scale(0.5)"
                            color="#CCCCCC"
                            name="arrow-down-fill"></u-icon></view
                ></view>
                <view class="num-list">
                    <view>已使用：{{ data.GotCount }}张</view>
                    <view>剩余：{{ data.CreatedCount - data.GotCount }}张</view>
                </view>
            </view>
            <view class="remarkinfo" v-if="show">{{ data.Remark }}</view>
        </view>
        <uni-popup ref="popDel" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>提示</text>
                </view>
                <view class="desc">确定删除该优惠券吗？</view>
                <view class="pop-action">
                    <view @click="delClose">取消</view>
                    <view @click="delConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="popGenerate" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>生成优惠券</text>
                </view>
                <view class="countinput"
                    ><input
                        type="tel"
                        placeholder="请输入要生成的数量"
                        v-model="count"
                        @input="checkNum($event)" /><text>张</text></view
                >
                <view class="pop-tip">注：每次最多生成1000张优惠券</view>
                <view class="pop-action">
                    <view @click="generateClose">取消</view>
                    <view @click="generateConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { SendCouponToUser, DeleteCouponByStore, CreateCouponByStore } from "@/service/api/coupon.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        userIds: {
            type: String,
        },
        tagId: {
            type: String,
        },
    },
    data() {
        return {
            show: false,
            count: "",
        }
    },
    mounted() {},
    onShow() {},
    methods: {
        ...mapMutations(["UP_COUPON_VIEW"]),
        checkNum(e) {
            let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
            if (!val) {
                this.count = ""
                return
            }
            var reg = /[^\d.]/g

            // 只能是数字和小数点，不能是其他输入
            val = val.replace(reg, "")
            // // 保证第一位只能是数字，不能是点
            val = val.replace(/^\./g, "")
            // // 小数只能出现1位
            val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
            // // 小数点后面保留2位
            val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")
            this.$nextTick(() => {
                this.count = val
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        remarkdesc() {
            this.show = !this.show
        },
        delcoupon() {
            this.$refs.popDel.open()
        },
        delClose() {
            this.$refs.popDel.close()
        },
        generateClose() {
            this.$refs.popGenerate.close()
        },
        delConfirm() {
            let path = "?couponId=" + this.data.ID
            DeleteCouponByStore(path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("删除成功")
                    this.delClose()
                    setTimeout((e) => {
                        this.UP_COUPON_VIEW(new Date().getTime())
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        generateCoupon() {
            this.$refs.popGenerate.open()
        },
        generateConfirm() {
            if (this.count < 0 || this.count == "" || this.count == 0) {
                this.easyToast("请至少生成1张优惠券")
                return
            }
            if (this.count > 1000) {
                this.easyToast("最多生成1000张优惠券")
                return
            }
            let path = "?couponId=" + this.data.ID + "&count=" + this.count
            CreateCouponByStore(path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("生成成功")
                    this.generateClose()
                    setTimeout((e) => {
                        this.UP_COUPON_VIEW(new Date().getTime())
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        give() {
            this.easyGoTo("/pages/coupon/memberList?id=" + this.data.ID)
            // let parms = {
            // 	couponId:this.data.ID,
            // 	tagType:1
            // }
            // if(this.userIds){
            // 	parms.cardNumbers = this.userIds
            // }
            // if(this.tagId){
            // 	parms.tagIds = this.tagId
            // }
            // SendCouponToUser(parms).then(res => {
            // 	if (res.State==1) {
            // 		uni.showToast({
            // 			icon:'none',
            // 			title:'发送成功',
            // 			duration:2000
            // 		})
            // 		this.UP_COUPON_VIEW(new Date().getTime())
            // 	}else{
            // 		uni.showToast({
            // 			icon:'none',
            // 			title:res.Msg,
            // 			duration:2000
            // 		})
            // 	}
            // })
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: 24rpx;
    font-size: 24rpx;
    margin-bottom: -24rpx;
}
.coupon {
    padding: 20rpx;
    background: #ffffff;
    border-radius: 8rpx;
    .coupon-top {
        background: #f7f7fa;
        display: flex;
        justify-content: space-between;
        height: 220rpx;
        border-radius: 8rpx;
        .name {
            font-size: 32rpx;
            font-weight: bold;
            padding: 12rpx 0 6rpx 0;
        }
        .time {
            color: $color-gray-3;
            font-size: 24rpx;
        }
        .c-t-l {
            padding: 16rpx;
            flex-direction: column;
            justify-content: space-around;
        }
        .tag {
            text {
                display: inline-block;
                font-size: 24rpx;
                height: 48rpx;
                line-height: 48rpx;
                padding: 0 20rpx;
                border-radius: 8rpx;
                background: #ff9e17;
                color: #ffffff;
                position: relative;
            }
            text:after {
                content: "";
                position: absolute;
                width: 16rpx;
                height: 16rpx;
                background: #f7f7fa;
                border-radius: 50%;
                left: -8rpx;
                top: 50%;
                margin-top: -8rpx;
            }
            text::before {
                content: "";
                position: absolute;
                width: 16rpx;
                height: 16rpx;
                background: #f7f7fa;
                border-radius: 50%;
                right: -8rpx;
                top: 50%;
                margin-top: -8rpx;
            }
        }
        .tag1 {
            text {
                background: #ff1c1c;
            }
        }
        .tag2 {
            text {
                background: #2e9852;
            }
        }
        .c-t-r {
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 224rpx;
            background: #fff4e7;
            border-radius: 8rpx;
            border-left: 1rpx dashed #ff1c1c;
            .price {
                color: #ff9000;
                font-size: 70rpx;
                font-weight: bold;
                text {
                    color: #ff9000;
                    font-size: 30rpx;
                    font-weight: normal;
                }
            }
            .price1 {
                color: #e62d2f;
                text {
                    color: #e62d2f;
                }
            }
            .price2 {
                color: #2e9852;
                text {
                    color: #2e9852;
                }
                .price2-text1 {
                    font-size: 44rpx;
                    position: relative;
                    top: -5rpx;
                }
                .price2-text2 {
                    font-size: 48rpx;
                }
            }
            .give {
                width: 160rpx;
                height: 56rpx;
                background: linear-gradient(90deg, #ff9201 0%, #fb6718 100%);
                border-radius: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
            }
            .give1 {
                background: linear-gradient(90deg, #fa3708 0%, #fb6416 100%);
            }
            .give2 {
                background: linear-gradient(90deg, #2e9852 0%, #2d9952 100%);
            }
        }
        .c-t-r:after {
            content: "";
            position: absolute;
            width: 30rpx;
            height: 30rpx;
            background: #fff;
            border-radius: 50%;
            left: -15rpx;
            top: -15rpx;
        }
        .c-t-r::before {
            content: "";
            position: absolute;
            width: 30rpx;
            height: 30rpx;
            background: #fff;
            border-radius: 50%;
            left: -15rpx;
            bottom: -15rpx;
        }
        .c-t-r1 {
            background: #ffeaea;
        }
        .c-t-r2 {
            background: #edfdf3;
        }
    }
    .coupon-bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 26rpx;
        .num-list {
            display: flex;
            justify-content: flex-end;
            view {
                padding-left: 24rpx;
                font-size: 22rpx;
                color: #333333;
            }
        }
    }
    .remarkinfo {
        padding: 20rpx 0 0rpx 0;
        font-size: 22rpx;
        color: $color-gray-3;
    }
}
.operation {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20rpx;
    view {
        display: flex;
        align-items: center;
        margin-left: 60rpx;
        text {
            font-size: 24rpx;
            color: $color-gray-3;
            padding-left: 12rpx;
        }
    }
}
.countinput {
    margin: 0 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 112rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
    border: 1rpx solid #979797;
    input {
        height: 112rpx;
        padding-left: 20rpx;
    }
    text {
        font-size: 34rpx;
        color: $color-gray-1;
        padding-right: 32rpx;
    }
}
.pop-tip {
    padding: 32rpx 48rpx 50rpx 48rpx;
    font-size: 26rpx;
    color: $color-gray-2;
}
</style>
